import { CheckOutlined } from '@ant-design/icons';
import { Button, message } from 'antd';

import styles from './index.less';

export interface Props {
  infoList: string[];
  title: string;
}

export default function PriviceInfo(props: Props) {
  const getQuote = () => {
    message.info('暂未支持');
  };

  return (
    <div className={styles.priceContent}>
      <div className={styles.boxTop}>
        <div className={styles.titleStyle}>{props.title}</div>
        <div className={styles.textStyle}>
          {props.infoList &&
            props.infoList.map((item: string) => {
              return (
                <div
                  key={Math.random()}
                  style={{ width: '100%', display: 'flex', alignItems: 'center' }}
                >
                  <div className={styles.itemStyle}>{item}</div>
                  <CheckOutlined style={{ color: '#ebcb83' }} />
                </div>
              );
            })}
        </div>
      </div>
      <div className={styles.boxBot}>
        <div className={styles.price}>&nbsp;</div>
        <div className={styles.trail} />
        <Button onClick={getQuote} type="default">获取报价</Button>
      </div>
      <div className={styles.float} style={{ width: 69, backgroundColor: '#EBCB83' }}>
        专属定制
      </div>
    </div>
  );
}
